<template>
  <div id="myChartPie" style="height: 100%; width: 100%"></div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
// import * as echarts from 'echarts/core';
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);




// 接下来的使用就跟之前一样，初始化图表，设置配置项
export default {
  name: "hello",
  props: ["data1"],
  data() {
    return {
      option:{
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: '80%',
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: []
            }
        ]
    }
        };
    },
    
    mounted() {
        this.drawLine();
        console.log(this.option.series[0].data);
        // this.option.series=table
    },
    methods: {
        drawLine() {
            var chartDom = document.getElementById('myChartPie');
            var myChart = echarts.init(chartDom);
            var option;
            option=this.option
            this.option.series[0].data=this.data1.data
            // this.option.series=this.table
            option && myChart.setOption(option);
        },
        
    },
}
</script>

<style>
</style>



